import React from 'react';
import $ from 'jquery';


class Map extends React.Component {
  static propTypes: {
    AddPoint: PropTypes.bool.isRequired,
    todos: PropTypes.array.isRequired,
    actions: PropTypes.object.isRequired,
    dataRegions: PropTypes.array.isRequired
  }

  map: null;
  layer_region: null;
  layer_region_label: null;

  constructor(props) {
    super(props);
    this.map = null;
    /*this.state = {
      zoom: 11
    }*/
    this.addPoint = this.addPoint.bind(this);
  }

  addPoint() {
    this.map.panTo(new SuperMap.LonLat(12958400.883957,4852082.440605948));
  }


  /**
   * 组件挂载后初始化地图
   */
  componentDidMount() {
    let controls_zoombars = [
      new SuperMap.Control.Navigation({
        dragPanOptions: {
          enableKinetic: true
        }
      })
    ];
    var map = new SuperMap.Map("map",
      {
        controls: controls_zoombars,
        allOverlays: true
      }
    );
    let layer = new SuperMap.Layer.CloudLayer();
    map.addLayer(layer);
    map.setLayerIndex(layer, 0);
    map.setBaseLayer(layer);

    map.setCenter( new SuperMap.LonLat(12958400.883957,4852082.440605948), 11);

    map.events.on({
      "zoomend": (evt)=>{
        /*this.setState({
          zoom: evt.object.zoom
        });*/
        this.refs.zoomlabel.innerHTML = evt.object.zoom;
      }
    });
    var strategy = new SuperMap.Strategy.GeoText();
    strategy.groupField = "area_status";
    strategy.styleGroups = Dituhui.Zone.getRegionTextStyleGroups();
    var layer_region_label = new SuperMap.Layer.Vector("Label", {renderers:["SVG"], strategies: [strategy]});
    var layer_region = new SuperMap.Layer.Vector("region", {renderers: ["SVG"]});
    map.addLayers([layer_region, layer_region_label]);
    this.map = map;
    this.layer_region = layer_region;
    this.layer_region_label = layer_region_label;

    this.showRegionsToMap = this.showRegionsToMap.bind(this);
  }

  /**
   * 组件更新之后
   */
  componentDidUpdate(nextProps, nextState) {
    console.log(this.props.dataRegions)
      this.showRegionsToMap(this.props.dataRegions);
    if(this.props.todo.text == "add-point") {
      this.addPoint();
    }
    return true;
  }

  showRegionsToMap(data) {
    this.layer_region.removeAllFeatures();
    this.layer_region_label.removeAllFeatures();
    var len = data.length;
    if(len === 0) {
      Dituhui.showPopover("当前查询到0条区划数据");
      return;
    }
    var fs = [], ls = [];
    for(var i = len; i--; ) {
      var record = data[i];
      if(!record.name) {
        record.name = "";
      }
      var point2Ds = record.points;
      var parts = record.parts;
      if(!parts || parts.length == 0 ) {
        continue;
      }
      var attr = record;
      attr.parts = null;
      attr.points = null;
      attr.type = "region";
      attr.branch_name = Dituhui.Zone.getBranchName(record.pointnames);
      
      var geometry = Dituhui.Zone.DrawRegion(parts, point2Ds);
      var style = Dituhui.Zone.getRegionStyle(record.name);
      attr.oldStyle = style;
      var feature = new SuperMap.Feature.Vector( geometry, attr, style );   
      fs.push(feature);

      var geoText = new SuperMap.Geometry.GeoText(record.center.x, record.center.y, record.name);

      var geotextFeature = new SuperMap.Feature.Vector(geoText);
      geotextFeature.style = Dituhui.Zone.getRegionTextStyle(record.area_status);
      
      var attr_label = attr;
      attr_label.type = "text-region";
      geotextFeature.attributes = attr_label;
      ls.push(geotextFeature);
    }
    this.layer_region.addFeatures(fs);
    this.layer_region_label.addFeatures(ls); 
    this.map.zoomToExtent(this.layer_region.getDataExtent());
  }
  zoomOut() {
    this.map.zoomOut();
  }

  zoomIn() {
    this.map.zoomIn();
  }

  render() {
    return (
      <div className="map" id="map" >
        <div className="zoom-control">
          <span className="map-zoom" ref="zoomlabel">11</span>
          <div className="zooms">
            <div className="zoom zoom-out" onClick={this.zoomOut.bind(this)}>
              <div className="out"></div>
            </div>
            <div className="zoom zoom-in" onClick={this.zoomIn.bind(this)}>
              <div className="in"></div>
            </div>
          </div>
        </div>
      </div>
    );
  }
};

export default Map;
